<template>
  <div class="box">
    <div>
      <div class="f1 banner1">
        <div class="f1_content">
          <div class="f1_content_right">
            <h1>智慧融通，链动未来</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="f3">
      <div class="f3_content">
        <div class="f3_content_title">供应链金融服务</div>
        <div class="f3_content_box">
          <div class="f3_content_item">
            <div class="f3_content_item_f1">
              <h3>商链采</h3>
              <p>
                基于核心企业与供应商的稳定合作关系，以核心企业推荐为前提，以历史合同、订单、结算信息为授信依据，为供应商提供的流动资金贷款产品。
              </p>
            </div>
            <div class="f3_content_item_f2">
              <h6>
                最高额度
                <h4>1,000<i>万</i></h4>
              </h6>
              <h6>
                利率低至
                <h4 style="color: #e78f3b">3.50<i>%</i></h4>
              </h6>
              <!-- <p>年化利率4.50%起</p> -->
              <div
                class="btn"
                @click="
                  goApply(
                    'SCF003001@SCF003002@SCF014001@SCF012001@SCF012002@SCF012003@SCF014001@SCF018001@SCF020002@SCF024001',
                    '商链采',
                    '基于核心企业与供应商的稳定合作关系，以核心企业推荐为前提，以历史合同、订单、结算信息为授信依据，为供应商提供的流动资金贷款产品。'
                  )
                "
              >
                立即申请
              </div>
            </div>
            <div class="f3_content_item_f3">
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />数据模型授信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />不占用核心企业授信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />无需核心企业确权
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />线上申请线上审批
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />最快T+0放款
              </div>
            </div>
          </div>
          <div class="f3_content_item">
            <div class="f3_content_item_f1">
              <h3>商链销</h3>
              <p>
                基于核心企业与经销商/客户的稳定合作关系，以核心企业推荐为前提，以历史合同、订单、结算信息为授信依据，为经销商/客户提供的流动资金贷款产品。
              </p>
            </div>
            <div class="f3_content_item_f2">
              <h6>
                最高额度
                <h4>1,000<i>万</i></h4>
              </h6>
              <h6>
                利率低至
                <h4 style="color: #e78f3b">4.50<i>%</i></h4>
              </h6>

              <div
                class="btn"
                @click="
                  goApply(
                    'SCF013001@SCF015001@SCF022001@SCF015001@SCF028001@SCF025001',
                    '商链销',
                    '基于核心企业与经销商/客户的稳定合作关系，以核心企业推荐为前提，以历史合同、订单、结算信息为授信依据，为经销商/客户提供的流动资金贷款产品。'
                  )
                "
              >
                立即申请
              </div>
            </div>
            <div class="f3_content_item_f3">
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />数据模型授信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />不占用核心企业授信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />线上申请线上审批
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />最快T+0放款
              </div>
            </div>
          </div>
          <div class="f3_content_item">
            <div class="f3_content_item_f1">
              <h3>商链保</h3>
              <p>
                在核心企业同意向银行/保理公司转让应收账款债权、以及按照银行/保理公司付款指示进行款项支付的条件下，供应商将应收账款债权转让至银行/保理公司获得融资。
              </p>
            </div>
            <div class="f3_content_item_f2">
              <h6>
                最高额度
                <h4>5,000<i>万</i></h4>
              </h6>
              <h6>
                利率低至
                <h4 style="color: #e78f3b">5.50<i>%</i></h4>
              </h6>

              <div
                class="btn"
                @click="
                  goApply(
                    'SCF019001@SCF017001@SCF026001',
                    '商链保',
                    '在核心企业同意向银行/保理公司转让应收账款债权、以及按照银行/保理公司付款指示进行款项支付的条件下，供应商将应收账款债权转让至银行/保理公司获得融资。'
                  )
                "
              >
                立即申请
              </div>
            </div>
            <div class="f3_content_item_f3">
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />不占用核心企业授信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />无需提供抵质押物增信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />线上办理，最快T+0放款
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />融资成本低，操作便捷
              </div>
            </div>
          </div>
          <div class="f3_content_item">
            <div class="f3_content_item_f1">
              <h3>商链贴</h3>
              <p>
                银行针对商业承兑汇票承兑人、持有人核定保贴额度，承诺对特定承兑人承兑的商业汇票或特定持有人持有的商业承兑汇票办理贴现的业务。
              </p>
            </div>
            <div class="f3_content_item_f2">
              <h6>
                最高额度
                <h4>3,000<i>万</i></h4>
              </h6>
              <h6>
                利率低至
                <h4 style="color: #e78f3b">2.80<i>%</i></h4>
              </h6>
              <div
                class="btn"
                @click="
                  goApply(
                    'SCF021001@SCF027001',
                    '商链贴',
                    '银行针对商业承兑汇票承兑人、持有人核定保贴额度，承诺对特定承兑人承兑的商业汇票或特定持有人持有的商业承兑汇票办理贴现的业务。'
                  )
                "
              >
                立即申请
              </div>
            </div>
            <div class="f3_content_item_f3">
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />不占用核心企业授信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />无需核心企业提供担保增信
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />线上办理贴现，实时到账
              </div>
              <div class="characteristic">
                <img src="../../assets/shanglian/圈勾.svg" alt="" />融资成本低，操作便捷
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="visible" width="32%">
      <!-- 内容区域 -->
      <div class="dialog-center">
        <p>为了保证体验更多的服务</p>
        <p>{{ title }}</p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="visible = false">稍后</button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorgInvoice()">立即前往</button>
      </div>
    </el-dialog>
    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="visibles" width="32%">
      <!-- 内容区域 -->
      <div class="dialog-center">
        <p>产品暂未开通，请联系客服</p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn2" @click="visibles = false">确认</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ProductcHoiceness from '@/components/ProductcHoiceness.vue'
import { myPostFetch } from '@/utils'
export default {
  components: { ProductcHoiceness },
  data() {
    return {
      visible: false,
      visibles: false,
      title: ''
    }
  },

  mounted() {},
  methods: {
    // 立即申请
    async goApply(item, name, productTitle) {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) {
        this.title = '请先完成登录'
        this.visible = true
        return
      }
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      if ((coopid !== 'null' && coopid !== 'undefined') & (rzstatus == 'succ')) {
        localStorage.clear()
        const loading = this.$loading({
          //lock的修改符--默认是false
          lock: true,
          //显示在加载图标下方的加载文案
          text: '拼命加载中',
          //自定义加载图标类名(在elementUI 文档查找)
          // spinner: "el-icon-loading",
          //(可以自己定义)遮罩层颜色
          background: 'rgba(255, 255, 255, .8)',
          //loadin覆盖的dom元素节点(整个页面的话'#body' 表格的话'#table'等等 )
          target: document.querySelector('#body')
        })
        let url = '/api/products/selectallproductlogin'
        let params = {
          customerid: sessionStorage.getItem('customerid'),
          productcode: item
        }
        let data = await myPostFetch(url, params)
        if (data.code == 10000) {
          this.$Message.error(data.msg)
          this.$router.push('/login')
          loading.close()
          sessionStorage.clear()
          localStorage.clear()
          return
        }
        if (data.data != 'null' && data.data != null && data.data.length != 0) {
          loading.close()
          localStorage.setItem('productCodeList', item)
          localStorage.setItem('productCodeName', name)
          localStorage.setItem('productTitle', productTitle)
          this.$router.push('/transitionPage')
        } else {
          //成功回调函数停止加载
          loading.close()
          this.visibles = true
          return
        }
      } else {
        this.title = '请前往用户中心完成认证'
        this.visible = true
        return
      }
    },

    // 跳转至登录或者认证
    updateCoopeorgInvoice() {
      this.visible = false
      let coopid = sessionStorage.getItem('coopid')
      let rzstatus = sessionStorage.getItem('rzstatus')
      let loginState = sessionStorage.getItem('loginState')
      this.visible = false
      if (!loginState) {
        this.$router.push('/login')
        this.setTime()
        return
      }
      if (coopid == 'null' || rzstatus != 'succ') {
        this.$router.push('/platform')
        this.setTime()
        return
      } else if (coopid == 'null') {
        this.$router.push('/platform')
        this.setTime()
        return
      }
    },
    // 定时器
    setTime() {
      setTimeout(() => {
        this.$router.go(0)
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  background-color: #ebedf2;
  .banner1 {
    background: url(@/assets/shanglian/组309.png) no-repeat;
    background-size: 100% 100%;
  }

  .f1_content_left {
    z-index: 99;
    position: absolute;
    box-sizing: border-box;
    top: 0.2865rem;
    left: 0.7813rem;
    padding: 0.1979rem 0.1719rem;
    width: 2.1875rem;
    height: 2.6042rem;
    background-color: #fff;
    border-radius: 0.0208rem;
    box-shadow: 0px 7px 12px 0px rgba(138, 160, 192, 0.3);
    .f1_content_left_title {
      display: flex;
      align-items: center;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #131313;
      margin-bottom: 0.1927rem;
      img {
        width: 0.1667rem;
        height: 0.1667rem;
        margin-right: 0.0781rem;
      }
    }
    .f1_content_left_list {
      box-sizing: border-box;
      padding: 0.15rem 0.1042rem;
      width: 100%;
      background: #ecf6ff;
      border-radius: 0.0104rem;
      margin-bottom: 0.0781rem;
      .productName {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 0.1302rem;
        .jiantou {
          position: absolute;
          right: 0.0781rem;
          width: 0.0625rem;
          height: 0.099rem;
          cursor: pointer;
        }
        h3 {
          font-weight: 600;
          font-family: 'Microsoft YaHei';
          font-size: 0.1042rem;
          color: #4a5378;
          margin-right: 0.0521rem;
        }
        img {
          width: 0.1771rem;
          height: 0.0938rem;
        }
      }
      .message {
        display: flex;
        width: 100%;
        margin-top: 0.1042rem;
        ul {
          margin-right: 0.1042rem;
          h2 {
            width: 0.7813rem;
            font-size: 0.0833rem;
            font-family: Source Han Sans SC;
            color: #9b9b9b;
          }
          h4 {
            height: 0.1563rem;
            line-height: 0.1563rem;
            margin-top: 0.0521rem;
            color: #3f6ef2;
            font-size: 0.0833rem;
          }
        }
      }
    }
    .video {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;

      height: 1.2344rem;
      background: url('@/assets/shanglian/组304.png') no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      img {
        width: 0.3542rem;
        margin-top: 0.1823rem;
      }
      p {
        margin-top: 0.0521rem;
        font-size: 0.0938rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .f1 {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    height: 3.2135rem;
    .f1_content {
      position: relative;
      display: flex;
      width: 8.4375rem;
      height: 2.6354rem;
      // .virtual {
      //   width: 2.1875rem;
      //   height: 2.6354rem;
      // }
      .f1_content_right {
        box-sizing: border-box;
        padding: 0.2083rem 0.1042rem 0 0.3125rem;
        flex: 1;
        display: flex;
        justify-content: center;
        // .title {
        // display: flex;
        // align-items: center;
        // color: #fff;
        // margin-left: 0.0781rem;
        h1 {
          position: absolute;
          // left: 3.6198rem;
          top: 0.4792rem;

          font-size: 0.3385rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-shadow: 0px 8px 18px #001754;
        }
        // }
      }
    }
  }
  .f2 {
    display: none;
    visibility: hidden;
    width: 10rem;
    height: 0.1563rem;
    background: #ebedf2;
    .f2_content {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 0 auto;
      width: 8.4375rem;
      height: 100%;
      overflow: hidden;
      .f2_content_title {
        font-size: 0.0946rem;
        font-weight: 500;
        color: #000000;
        margin-right: 0.1979rem;
      }
      .f2_content_list {
        box-sizing: border-box;
        padding: 0.0208rem 0.0521rem;
        display: flex;
        align-items: center;
        width: 1.2042rem;
        height: 0.1458rem;
        margin-right: 0.1563rem;
        background: #dce4f8;
        p {
          width: 1.3542rem;
          font-size: 0.0733rem;
          font-weight: 400;
          color: #333333;
          text-align: center;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 隐藏溢出的部分 */
          text-overflow: ellipsis; /* 显示省略号 */
        }
        img {
          width: 0.0938rem;
          height: 0.0938rem;
        }
      }
    }
  }
  .f4 {
    position: absolute;
    top: 2.1094rem;
    // width: 10rem;
    // background: #ebedf2;
    .f4_content {
      box-sizing: border-box;
      padding-right: 0.1302rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin: 0 auto;
      // width: 8.4375rem;
      height: 100%;
      overflow: hidden;
      .f4_content_list {
        box-sizing: border-box;
        width: 5.9896rem;
        height: 0.7813rem;
        margin-bottom: 30px;
        box-shadow: 0px 0.0365rem 0.0625rem 0px rgba(138, 160, 192, 0.3);
        border-radius: 0.0208rem;
        .f4_content_list_ul {
          display: flex;
          align-items: center;
          width: 100%;
          height: 100%;
          background-color: #fff;
          .f4_content_list_li {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 0.263rem;
            width: 33%;
            height: 100%;
            .f4_content_list_li_left {
              img {
                width: 0.4688rem;
                margin-right: 0.0521rem;
              }
            }
            .f4_content_list_li_right {
              h2 {
                display: flex;
                align-items: center;
                font-size: 0.0938rem;

                h4 {
                  top: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 0.3438rem;
                  height: 0.0833rem;
                  background: #ec7d13;
                  border-radius: 6px 0px 6px 0px;
                  font-size: 0.0625rem;
                  font-family: Source Han Sans SC;
                  font-weight: 300;
                  color: #ffffff;
                  margin-left: 0.0521rem;
                }
              }

              p {
                font-size: 0.0833rem;
              }
            }
          }
          .border {
            width: 1px;
            height: 0.4167rem;
            background: #dbdde0;
          }
        }
      }
    }
  }
  .f3 {
    box-sizing: border-box;
    padding: 0.2604rem 0 0.5313rem 0;
    width: 10rem;
    background-color: #ebedf2;
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53,
      sans-serif;
    .f3_content {
      width: 8.4375rem;
      // height: 500px;
      // background: pink;
      margin: 0 auto;
      .f3_content_title {
        font-size: 0.1354rem;
        color: #000000;
        text-align: center;
        font-weight: 600;
        margin-bottom: 0.2604rem;
      }
      .f3_content_box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        // height: 100%;
        // background: #001754;
        .f3_content_item {
          width: 4.1667rem;
          // height: 2.1875rem;
          background: rgb(255, 255, 255);
          border-radius: 0.0521rem;
          margin-bottom: 0.0781rem;
          box-shadow: 0.0469rem 0px 0.125rem 0px #9bb9e3;
          .f3_content_item_f1 {
            box-sizing: border-box;
            padding: 0.1042rem 0.2344rem 0 0.2344rem;
            background: url(@/assets/shanglian/图层0.png) no-repeat;
            background-size: cover;
            border-radius: 0.0521rem;
            h3 {
              font-size: 0.125rem;
              color: #242526;
              margin-bottom: 0.0781rem;
            }
            p {
              // padding-bottom: 25px;
              font-size: 0.0833rem;
              color: #808080;
              height: 0.4688rem;
            }
          }
          .f3_content_item_f2 {
            display: flex;
            box-sizing: border-box;
            padding: 0.0781rem 0.2344rem;
            position: relative;
            border-bottom: 0.0052rem solid #ececec;
            .btn {
              cursor: pointer;
              position: absolute;
              right: 0.2865rem;
              top: 0.2604rem;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 0.8333rem;
              height: 0.2188rem;
              background: linear-gradient(-90deg, #5d98f8, #4b5af8);
              box-shadow: 0px 0.0313rem 0.1042rem 0px rgba(0, 40, 193, 0.5);
              border-radius: 0.0208rem;
              font-size: 0.0938rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #ffffff;
            }
            h6 {
              font-size: 0.0938rem;
              color: #6b6b6b;
              margin-right: 0.625rem;
              h4 {
                font-size: 0.1875rem;
                color: #2c68e1;
                margin-top: 0.0417rem;
                i {
                  font-size: 0.0833rem;
                }
              }
            }

            // p {
            //   font-size: 0.0938rem;
            //   color: #6a6a6a;
            //   font-weight: 500;
            // }
          }
          .f3_content_item_f3 {
            box-sizing: border-box;
            padding: 0.0781rem 0.2344rem;
            display: flex;
            justify-content: space-between;
            color: #8d8d8d;
            // margin-top: 0.1302rem;
            .characteristic {
              display: flex;
              align-items: center;
              color: #8d8d8d;
              font-size: 0.0729rem;
              img {
                width: 0.0938rem;
                margin-right: 0.0208rem;
              }
            }
          }
        }
      }
    }
  }
}
// 弹出框
.dialog-center {
  text-align: center;
  overflow: hidden;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 600;
    color: #4d4d4d;
  }
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  z-index: 9999;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 1px solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
    z-index: 9999;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    z-index: 9999;
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0.1563rem 0.1042rem;
  color: #606266;
  font-size: 0.0729rem;
  word-break: break-all;
}
::v-deep .el-dialog__header {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 46px;
  padding: 0.1042rem 0.1042rem 0.0521rem;
  border-bottom: 0.0052rem solid #dddbdb;
}
::v-deep .el-dialog__title {
  font-size: 0.1042rem;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #3f6df1;
}
// 轮播图
::v-deep .el-carousel {
  width: 10rem;
  height: 3.2135rem;
  position: relative;
}
::v-deep .el-carousel__container {
  height: 3.2135rem;
}
/* 下拉选择器 */
::v-deep .abc .el-input__inner {
  border-radius: 0px;
  padding: 0 0.0781rem;
  height: 0.224rem;
  width: 1.6406rem;
  &::placeholder {
    font-size: 0.0833rem;
    color: #afb1bd;
  }
}
::v-deep .abc .el-select {
  width: 1.6406rem;
}
::v-deep .el-icon-arrow-up:before {
  content: '';
}
</style>
<style>
.el-popover {
  min-width: 0.2604rem;
}
</style>
